<template>
  <div class="details">
    <van-nav-bar
      :title="user.userName"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div v-if="!loading">
      <div v-if="projectData.list.length > 0 && projectItem.classesName">
        <div class="top-bground">
          <img
            :src="projectItem.classesName"
            style="width: 100%; height: 100%"
          />
        </div>

        <div class="top-box">
          <div class="ptitle">{{ projectItem.projectName }}</div>
        </div>

        <div class="content">
          <span class="titleDsc">测评指导语</span>
          <div class="desc"></div>
        </div>
        <div v-if="stickLoading" class="stick">
          <div v-if="reportBtnVisible" class="fnish-title">
            恭喜您，已完成测评项目！
          </div>
          <div class="btn-wrapper">
            <van-button
              v-if="reportBtnVisible"
              type="primary"
              class="btn11"
              block
              @click="onClickLeft"
            >
              返回平台首页
            </van-button>
            <van-button
              v-if="startBtnVisible && projectItem.projectName"
              type="primary"
              class="btn"
              style="width: 94%; margin: 0 auto; border-radius: 5px"
              block
              @click="onStart"
            >
              开始测评
            </van-button>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="title-img">
          <img src="../../assets/icon/hklogo@2x.png" alt="" />
        </div>
        <div class="tips">您暂时无可测评的项目，祝您身体健康，学习进步！</div>
        <div class="tips-button">
          <van-button
            type="primary"
            style="width: 80%; margin: 0 auto; border-radius: 5px"
            block
            @click="onClickLeft"
          >
            返回平台首页
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  watch,
  onActivated,
  computed,
  onMounted,
  nextTick,
} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { geMeasureList, geGaugetype } from '../../api/home/home'
import { useStore } from '/@/store'
import axios from '../../api/axios'
import dayjs, { Dayjs } from 'dayjs'
import { useLoginer } from '/@/use/loginer'
import { Project } from '/@/types/Project'
import { getUser } from '../../util/auth'

export default defineComponent({
  setup(props) {
    const styleObject = reactive({ background: '' })
    const router = useRouter()
    const route = useRoute()
    const query = router.currentRoute.value.query
    const expertList: any[] = reactive([])
    const projectItem = reactive({} as Project)
    const isBackRouter = query.isBackRouter
    const user = JSON.parse(getUser())
    const projectData = reactive({
      list: [{}] as any[],
      title: '项目数据',
    })
    let loading = ref(true)

    geMeasureList(1, 5, {
      projectId: route.query?.projectId,
    }).then((res) => {
      const data = res.data.data.records[0]
      Object.assign(projectItem, data)
      styleObject.background = projectItem.classesName
      projectData.list = res.data.data.records
    })

    watch(
      () => projectData.list,
      () => {
        loading.value = false

        nextTick(() => {
          const elementCreate = document.createElement('div')
          elementCreate.innerHTML = (projectItem as any).accessRemark
          document.querySelector('.desc')!.appendChild(elementCreate)
        })
      }
    )

    const {
      stickLoading,
      isTested,
      userProjectId,
      startBtnVisible,
      reportBtnVisible,
    } = useIsTested(projectItem)

    return {
      stickLoading,
      projectData,
      loading,
      user,
      expertList,
      projectItem,
      styleObject,
      isTested,
      startBtnVisible,
      reportBtnVisible,
      onClickLeft() {
        if (isBackRouter) {
          return history.back()
        }
        router.push({ name: 'Home' })
      },
      onStart() {
        router.push({
          name: 'EvaluateDetails',
          query: { projectId: projectItem.projectId },
        })
      },
      goToReport() {
        router.push({
          name: 'EvaluateResult',
          query: { userProjectId: userProjectId.value },
        })
      },
    }
  },
})

function useTime() {
  const startTime = ref<Dayjs>(dayjs())
  const endTime = ref<Dayjs>(dayjs())

  const duration = computed(() => endTime.value.diff(startTime.value, 'm'))

  onMounted(() => {
    startTime.value = dayjs()
  })

  return {
    startTime,
    duration,
    endTime,
    getTime() {
      endTime.value = dayjs()
    },
  }
}

function useIsTested(projectItem: any) {
  const isTested = ref(false)

  const { state } = useStore()

  const userProjectId = ref('')

  const { loginer } = useLoginer()

  const stickLoading = ref(false)

  watch(
    () => projectItem.projectId,
    async (pid) => {
      getData(pid)
    },
    { immediate: true }
  )

  onActivated(() => {
    getData(projectItem.projectId)
  })

  async function getData(pid: number) {
    const {
      data: {
        data: { records },
      },
    } = await getProjectList(state.user.userId, pid)

    isTested.value = records.length > 0

    if (isTested.value) {
      userProjectId.value = records[0].id
    }
  }

  stickLoading.value = true

  return {
    stickLoading,
    isTested,
    userProjectId,
    startBtnVisible: computed(() => {
      if (loginer.value?.tenantId === '314777') {
        return true
      }
      return !isTested.value
    }),
    reportBtnVisible: computed(() => {
      return isTested.value
    }),
  }
}

function getProjectList(userId: number, projectId: number) {
  const url = `/api/blade-measure/measure/userprojectgauge/page?current=1&size=500&includeId=${userId}&projectId=${projectId}`

  return axios.get(url)
}
</script>

<style lang="less" scoped>
.details {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100vh - 45px);
  margin-top: 50px;
  background-color: white;
  .cell__title {
    font-size: 15px;
    color: #0387cf;
  }
  .cell__more {
    font-size: 12px;
    color: #828282;
  }
  .car_title {
    font-size: 13px;
    font-weight: bold;
  }
  /deep/ .van-cell__title {
    font-size: 15px;
    color: #0387cf;
  }
  /deep/ .van-card__title {
    font-size: 13px;
    font-weight: bold;
  }
  .desc {
    font-size: 14px;
    color: #535353;
    line-height: 20px;
    text-indent: 32px;
    margin-top: 5px;
  }
  .titleDsc {
    color: #fff;
    background-color: #3aa7d9;
    padding: 5px;
    font-size: 15px;
    border-radius: 5px;
  }
}

.ptitle {
  color: #0387cf;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.top-bground {
  width: 100%;
  height: 220px;
  margin-top: -10px;
  position: relative;
  z-index: 0;
}
.stick {
  width: 100%;
  position: fixed;
  bottom: 0px;
  background-color: white;
  padding-bottom: 20px;
}

.top-box {
  position: relative;
  z-index: 0;
  margin-top: -24px;
  border-radius: 24px 24px 0 0;
  background-color: white;
  padding: 36px 12px 12px 12px;
}

.content {
  background-color: white;
  font-size: 18px;
  padding: 12px;
  margin-bottom: 110px;
}

.btn-wrapper {
  display: flex;
}

.fnish-title {
  text-align: center;
  font-size: 16px;
  padding-bottom: 10px;
  color: #0387cf;
}

.title-img {
  text-align: center;
  padding: 50px 0;

  img {
    width: 140px;
  }
}

.tips {
  font-size: 14px;
  text-align: center;
  color: #646566;
  margin-top: 20px;
}

.tips-button {
  padding: 20px 0;
}

.btn {
  width: 94%;
  margin: 0 auto;
  border-radius: 5px;
}
</style>
